<template>
	<view class="page px22 pt1">
		<view class=" px22 py18"	:style="{position:'fixed', background:'#F7F7F7',top:'-10rpx', right:0,left:0}">
			<u-search @search="search" @custom="search" :searchIconSize="22" :height="35"
				:action-style="{color:'#fff', padding:'18rpx 28rpx', borderRadius:'36rpx',background:'#1F9A64'}"
				placeholder="搜索" v-model="keyword"></u-search>
		</view>
		<view class="mt80">
			
		</view>
		<ProductCard @ProductCardClick="ProductCardClick(item)" :productData="item" v-for="item in list"
			:key="item.id"></ProductCard>
			
			<u-loadmore class="mt50" iconSize="14" :height="50" font-size="14" :status="status" :loading-text="loadingText"
				:loadmore-text="loadmoreText" :nomore-text="nomoreText" />
	</view>
</template>

<script>
	import ProductCard from '@/components/ProductCard.vue'
	export default {
		components: {
			ProductCard,
		},
		data() {
			return {
				keyword:'',
				page:1,
				limit:5,
				list:[],
				status: 'loadmore',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '没有更多了',
			}
		},
		onLoad(){
			this.getData()
		},
		
		onReachBottom() {
			if(this.status == 'nomore'){
				return 
			}
			this.page++
			this.getData()
		},
		methods: {
			getData() {
				this.status = 'loading'
				this.$http({
					url: '/Data/patrol_index',
					data: {
						page: this.page,
						limit: this.limit,
						keyword:this.keyword
					}
				}).then(res => {
					this.list.push(...res.data.list)
					if(this.limit > res.data.list.length){
						this.status = 'nomore'
						
					}else{
						this.status = 'loadmore'
					}
				})
			},
			search(){
				this.status = 'loading'
				this.page = 1
				this.list=[]
				this.getData()
			},
			ProductCardClick(item){
				uni.navigateTo({
					url: '/managePage/pages/patrolDetail/patrolDetail?id=' + item.id
				})
			}
		}
	}
</script>

<style>

</style>
